<template>
	<div v-show="loadingShow">
		<loading></loading>
	</div>
	<div v-else>
		<div class="card-buy-index">
			<details-focus></details-focus>
			<details-basic-info></details-basic-info>
			<card-service></card-service>
			<details-commodity-info></details-commodity-info>
			<div v-show="btnType">
				<div class="card-buy-btn">
					<button ca="P套餐卡_购买套餐卡列表${{caSpuName}}$立即购买" @click="buy">立即购买</button>
				</div>
			</div>
			<div v-else>
				<div class="card-buy-btn btn-clock">
					<a>暂不可售</a>
				</div>
			</div>
		</div>
		<div>
	  		<iframe :src="iframe" style="display: none" v-if="isIOSWechat"></iframe>
		</div>
	</div>
</template>

<script>
	import detailsFocus from '../details/details-focus';
	import detailsCommodityInfo from '../details/details-commodity-info';
	import detailsBasicInfo from '../details/details-basic-info';
	import cardService from './card-service';
	import cardBtn from './card-btn';
	import common from '../../utils/common';
	import loading from '../common/loading';
	//import cx_analytics from '../../utils/cx_analytics.js';埋点
	
	export default {
		data: function () {
			return {
				detailsFocusD: {}, // focus data
				skuCode: '',
				richDetail:'',
				cityId:'',
				btnType:'',
				iframe:'',
				isIOSWechat: common.isIOSWechat(),
				caSpuName:'', //埋点商品名称
				loadingShow:true,
				shortName:''
			}
		},
		components: {
			detailsFocus,
			detailsBasicInfo,
			cardService,
			detailsCommodityInfo,
			cardBtn,
			loading
		},
		methods: {
			buy: function () {
				// 如果渠道为微信，并且openid为空 那么跳转到下载页面
				if(endType == 'wxCode' && (common.getCookie('wemall_openid_c')=='""' || !common.getCookie('wemall_openid_c'))){
					var userinfo = window.location.href.substring(window.location.href.indexOf("userInfo="))
					window.location.href="http://wx.chexiangpre.com/wxoauth2/s/getOpenId4CXJ.htm?targetUrl="+'//'+window.location.hostname+'/spah5/@/cardservice?skuCodes='+this.skuCode;
					return;
				}else{
					this.$route.router.go({'name': 'card-service', 'query': { 'skuCodes':  this.skuCode } });
				}
				

			},
			pageInit:function(parm){
				//请求卡详情信息
				var _this = this;
				this.$http.post(common.isdev()+'/detail/spuDetail.htm',{
					spuCode: parm
				}).then(function ( d ) {
					
					var res = typeof d.data === 'object' ? d.data : JSON.parse(d.data);

					var finallyDetailsFocusData = {};
					
					var _skuCode = res.obj.spuInfo.skuCode;

					this.richDetail = res.obj.spuInfo.mdseMobileRichId;

					if ( res.result === 1 ) {

						var shortName = res.obj.spuInfo.shortName;
						this.shortName = shortName;
						common.setTitle(this.shortName);  //设置title

						var cardServiceData = res.obj.spuInfo.attributes;

						this.caSpuName = res.obj.spuInfo.spuName;
						finallyDetailsFocusData['spuName'] = res.obj.spuInfo.spuName;
						finallyDetailsFocusData['androidImageList'] = res.obj.spuInfo.androidMainImage;	

						

						// 写入data detailsFocus 组件
						for ( var i in finallyDetailsFocusData ) {
							common.Vue.set(_this.detailsFocusD, i, finallyDetailsFocusData[i] );
						}
						// 写入数据  chooseInfo 组件
						//_this.detaileChooseInfo = res.obj.storeInfo;
						// 传送数据到	detailsFocus 组件
						_this.$broadcast('detailsFocusDataEvent', _this.detailsFocusD);

						//传送数据到 detailsBasicInfoSpuName组件
						_this.$broadcast('detailsBasicInfoSpuName',res.obj.spuInfo);

						//设置 richId
						_this.richId = res.obj.spuInfo.mdseMobileRichId;

						var _prmtQuery = JSON.stringify({"skuCode": _skuCode,"triggerEvent":1}); 
						var _cxjPriceParam = JSON.stringify({"skuCode": _skuCode});
						
						_this.skuCode = _skuCode;

						// 设置skuCode
						_this.$broadcast('cardBtnSkuCode',_skuCode);

						//查询套餐卡服务内容
						this.$http.post(common.isdev()+'/detail/richDetail.htm', {

							richId: this.richDetail

						}).then(function ( d ) {

							var msg = typeof d.data === 'object' ? d.data.msg : JSON.parse(d.data).msg;

							_this.$broadcast('detailsCommodityInfo',msg);
							
						}, function ( error ) {
							common.Toast('查询套餐卡服务内容出错');
						});

						//查询价格
						this.$http.post(common.isdev()+'/pricePrmtHandle/queryCxjMdsePricePrmt.htm', {

							prmtQuery: _prmtQuery,
							cxjPriceParam: _cxjPriceParam

						}).then(function ( d ) {

							var resData = typeof d.data === 'object' ? d.data : JSON.parse(d.data);
							var provName;
							if ( resData.result === 1 ) {

								_this.detailsBasicInfo = resData.obj;
								if(resData.obj != null){
									
									if(resData.obj.price.priceType == 1 && res.obj.spuInfo.iscombined != 2){ //禁用下单按钮
									
										_this.btnType = false;
									}else{
										_this.btnType = '';
										_this.btnType = true;
									}
									
									//传送数据到 cardService组件
									provName = common.getProvince(resData.obj.areaInfoVo.areaCode.substr(0,2));
									_this.$broadcast('cardServiceData',shortName,cardServiceData,provName);

									_this.$broadcast('setCityName', resData.obj.areaInfoVo);
									_this.$broadcast('detailsBasicInfoPrice', resData.obj.price);
								}
								_this.$broadcast('detailsBasicInfoEvent', _this.detailsBasicInfo);

								this.loadingShow = false;
							} else if ( resData.result === 0 ) {
								this.loadingShow = false;
								_this.$broadcast('detailsBasicInfoEvent', resData);
								/*if(resData.message != ''){
									common.Toast(resData.message);
								}*/
								
							}

							this.$nextTick(function () {
								common.ANA_Analytics();
						    });
						}, function ( error ) {
							common.Toast('详情页的促销，价格接口 -- 出错');
						});

					};	

				}, function( err ) {
					if(err != ''){
						common.Toast(err);
					}
					
				});

			}
		},
		route:{
			data(){
				this.cityId = (this.$route.params.cityId);
				this.pageInit(this.$route.params.spuCode);
			}
		}
	}

</script>
<style lang="scss" scoped>
@import "../../assets/css/_functions.scss";
@import "../../assets/css/_variables.scss";
	.card-buy-btn{
		display:block;
		position: fixed;
		bottom: 0;
		background:#fff;
		padding:rem(12) rem(20);
		width:rem(375);
		-webkit-box-shadow:0 0 20px rgba(204, 204, 204, .7);  
		-moz-box-shadow:0 0 20px rgba(204, 204, 204, .7);  
		box-shadow:0 0 20px rgba(204, 204, 204, .7);  
	}
	.card-buy-btn a, .card-buy-btn button{
	    display: block;
	    text-align: center;
	    width: 14.8rem;
	    font-family: "Microsoft YaHei" !important;
	    height: 4.5rem;
	    line-height: 4.8rem;
	    font-size: 1.8rem;
	    border: none;
	    outline: none;
	    background: #ff6600;
	    color: #fff;
	    float: right;
	    border-radius: 5px;
	}
	.btn-clock{
		background-color:#8c8c8c;
	}
	.details-basic-info .basicinfo-con1 .prod-price-wrap .prod-price{
		display:none;
	}
</style>
